import React from 'react';
import { useState } from 'react';
import { observer } from 'mobx-react-lite';

const Bet: React.FC = observer(() => {
  // 初始化赌注金额为10,000
  const [betAmount, setBetAmount] = useState(10000);
  // 管理向上箭头的hover状态
  const [isUpHovered, setIsUpHovered] = useState(false);
  const [isDownHovered, setIsDownHovered] = useState(false);

  // 金额增加函数
  const increaseAmount = () => {
    setBetAmount((prev) => Math.min(prev + 1000, 50000)); // 上限50,000
  };

  // 金额减少函数
  const decreaseAmount = () => {
    setBetAmount((prev) => Math.max(prev - 1000, 10)); // 下限10
  };

  // 格式化金额显示
  const formatAmount = (amount: number) => {
    return amount.toLocaleString();
  };

  return (
    <div className="relative w-[439px] h-[512px] p-4 rounded-lg bg-[#242223] border-2 border-[#F422FF]">
      {/* 标题 */}
      <h2 className="text-white text-xl font-medium mb-4">Bet Amount</h2>

      {/* 金额显示区域 */}
      <div className="relative mb-6">
        <div className="bg-[#393839] rounded-lg py-4 px-6">
          <input
            type="text"
            className="w-full bg-transparent text-3xl font-bold text-white text-center focus:outline-none border-transparent focus:border-transparent"
          />
        </div>

        {/* 上下箭头按钮 */}
        <div className="absolute right-6 top-1/2 transform -translate-y-1/2 flex flex-col gap-2">
          <div
            onClick={increaseAmount}
            onMouseEnter={() => setIsUpHovered(true)}
            onMouseLeave={() => setIsUpHovered(false)}
            className="w-[24px] h-[24px] object-contain cursor-pointer"
          >
            <img
              src={
                isUpHovered ? `./gameDetail/up.png` : `./gameDetail/upHover.png`
              }
            />
          </div>
          <div
            onClick={decreaseAmount}
            onMouseEnter={() => setIsDownHovered(true)}
            onMouseLeave={() => setIsDownHovered(false)}
            className="w-[24px] h-[24px] object-contain cursor-pointer"
          >
            <img
              src={
                isDownHovered
                  ? `./gameDetail/down.png`
                  : `./gameDetail/downHover.png`
              }
            />
          </div>
        </div>
      </div>

      {/* Betting按钮 */}
      <div className="w-full cursor-pointer bg-[#F422FF] flex items-center justify-center text-white py-3 rounded-lg font-medium text-[16px] transition-colors mb-6">
        <div className="w-[24px] h-[24px] object-contain">
          <img src={`./gameDetail/betIcon.png`} />
        </div>
        <span className="pl-[2px]">{t('gameDetail.Betting')}</span>
      </div>

      {/* 赔率和转账限额信息 */}
      <div className="border border-dashed border-gray-600 rounded-lg p-4">
        <div className="mb-4">
          <p className="text-gray-400 text-sm mb-1">{t('gameDetail.Odd')}</p>
          <p className="text-white font-medium">1:1.95</p>
        </div>

        <div className="border-t border-gray-700 pt-4">
          <p className="text-gray-400 text-sm mb-1">
            {t('gameDetail.TransferLimit')}
          </p>
          <div className="flex items-center justify-between">
            <p className="text-white font-medium">10 - 50000</p>
            <p className="text-gray-500"> {t('gameDetail.USDO')}</p>
          </div>
        </div>
      </div>
    </div>
  );
});

export default Bet;
